<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">{{classDesc}}</text>
		</view>

		<!-- 平台列表 -->
		<view class="platform-list">
			<view class="platform-item item-header">
				<view class="platform-info">
					<text class="platform-id item-header-column">序号</text>
					<text class="platform-name item-header-column ">选项值</text>
				</view>
				<view class="platform-actions item-header-column item-header-column-op">
					操作列
				</view>
			</view>
			<view class="platform-item" v-for="item in datalist" :key="item.id">
				<view class="platform-info">
					<text class="platform-id">{{item.optKey}}</text>
					<text class="platform-name">{{item.optDesc}}</text>
				</view>
				<view class="platform-actions">
					<button class="action-btn edit-btn" @click="editPlatform(item)">编辑</button>
					<button class="action-btn delete-btn" @click="deletePlatform(item.id)">删除</button>
				</view>
			</view>
		</view>
		
		<!-- 修改数量的弹窗 -->
		<uni-popup ref="editPopup" type="dialog">
			<view class="out-popup">
				<view class="out-popup-title"> {{popTitle}} </view>
				<view class="out-popup-num">
					<text>出库数量：</text>
					<uni-number-box :min="0" :max="max" v-model="editQuantity" />
				</view>
				<view class="out-popup-btn">
					<button class="btn cancel" @click="cancelEdit()">取消</button>
					<button class="btn config" @click="confirmEdit()"></button>
				</view>
			</view>
		</uni-popup>

		<!-- 添加类别按钮 -->
		<view class="add-category-btn" @click="addPlatform">
			<image class="iconfont icon-plus" src="/static/add.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classCode: '',
				classDesc: '',
				datalist: [],
				popTitle:''
			}
		},

		onLoad(option) {
			debugger;
			if (option?.classCode) {
				this.classCode = option?.classCode;
			}
			if (option?.classDesc) {
				this.classDesc = option?.classDesc;
			}

			this.queryData();
		},

		created() {

		},

		methods: {
			queryData() {
				this.$api.dataOptQuery(this.classCode).then(result => {
					if (result && result.code == '200') {
						this.datalist = result.data;
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},

			// 编辑平台
			editPlatform(item) {
				uni.showModal({
					title: '编辑平台',
					content: `确定要编辑 ${item.name} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: `正在编辑 ${item.name}`,
								icon: 'none'
							})
							// 这里可以跳转到编辑页面或弹出编辑表单
							// uni.navigateTo({ url: `/pages/platform/edit?id=${item.id}` })
						}
					}
				})
			},

			// 删除平台
			deletePlatform(id) {
				uni.showModal({
					title: '删除确认',
					content: '确定要删除这个平台吗？',
					success: (res) => {
						if (res.confirm) {
							this.delData(id);
						}
					}
				})
			},

			// 添加平台
			addPlatform(item) {
				uni.showModal({
					title: '添加平台',
					content: `确定要基于 ${item.name} 添加新平台吗？`,
					success: (res) => {
						if (res.confirm) {
							const newId = Math.max(...this.platformList.map(p => p.id)) + 1
							this.platformList.push({
								id: newId,
								name: `${item.name}副本`
							})
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							})
						}
					}
				})
			},

			addData() {
				this.$api.dataOptAdd().then(result => {
					if (result && result.code == '200') {
						uni.showToast({
							title: "添加成功!",
							duration: 3000
						});
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},

			updateData() {
				this.$api.dataOptUpdate().then(result => {
					if (result && result.code == '200') {
						this.datalist = result.data;
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},


			delData() {
				this.$api.dataOptDel().then(result => {
					if (result && result.code == '200') {
						this.datalist = result.data;
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	@import url("@/common/css/list_new.less");

	.container {
		background-color: #f0f5f9;
		padding: 0 20rpx;
	}

	.header {
		padding: 20rpx 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.platform-list {
		margin-top: 20rpx;
	}

	.item-header-column {
		font-size: 32rpx;
		color: currentColor !important;
	}

	.item-header-column-op {
		width: 155rpx;
	}

	.platform-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.platform-info {
		display: flex;
		align-items: center;
	}

	.platform-id {
		color: #999;
		margin-right: 20rpx;
		width: 85rpx;
	}

	.platform-name {
		font-size: 32rpx;
	}

	.platform-actions {
		display: flex;
	}

	.action-btn {
		margin-left: 10rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.edit-btn {
		background-color: #2979ff;
		color: white;
	}

	.delete-btn {
		background-color: #ff5a5f;
		color: white;
	}

	.add-btn {
		background-color: #19be6b;
		color: white;
	}

	/* 添加类别按钮 */
	.add-category-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 80rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
		border-radius: 50%;
		font-size: 60rpx;
		
		.iconfont{
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>